<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="backbox">
      <div class="bigImgBox">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607344905447&di=ced967a6564a31aea4ec44c08cdb77c4&imgtype=0&src=http%3A%2F%2Fi1.sinaimg.cn%2FIT%2F2010%2F0419%2F201041993511.jpg"
          alt=""
        />
      </div>
      <p class="groupName">{{ title }}</p>
      <p class="groupTitle">工作群</p>
      <ul class="groupIcon">
        <li>
          <van-icon size="30" color="#4e90ff" name="volume-o" />
          <p>群公告</p>
        </li>
        <li>
          <van-icon size="30" color="#4e90ff" name="photo-o" />
          <p>图片</p>
        </li>
        <li>
          <van-icon size="30" color="#4e90ff" name="description" />
          <p>文件</p>
        </li>
        <li>
          <van-icon size="30" color="#4e90ff" name="star-o" />
          <p>收藏</p>
        </li>
        <li>
          <van-icon size="30" color="#4e90ff" name="service-o" />
          <p>语音</p>
        </li>
        <li>
          <van-icon size="30" color="#4e90ff" name="location-o" />
          <p>位置</p>
        </li>
      </ul>
    </div>
    <div class="backbox">
      <div class="memberTitle">
        <span class="memberLeft">群成员</span>
        <span class="memberRight">
          3人<van-icon name="arrow" color="#4e90ff" />
        </span>
      </div>
      <ul class="memberImg">
        <li>
          <img
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950046823,4199082027&fm=26&gp=0.jpg"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1428068692,3619744005&fm=26&gp=0.jpg"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=380543229,3324930729&fm=26&gp=0.jpg"
            alt=""
          />
        </li>
      </ul>
    </div>
    <div class="backbox">
      <van-cell center title="置顶聊天">
        <template #right-icon>
          <van-switch v-model="topChecked" size="24" />
        </template>
      </van-cell>
      <van-cell center title="消息免打扰">
        <template #right-icon>
          <van-switch v-model="disturbingChecked" size="24" />
        </template>
      </van-cell>
    </div>
    <van-cell value="清空聊天记录" />
  </div>
</template>

<script>
export default {
  name: "ChatSet",
  data() {
    return {
      title: "",
      topChecked: true,
      disturbingChecked: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
  mounted() {
    this.title = this.$route.query.data;
  },
};
</script>

<style scoped lang='less'>
.backbox {
  background: #fff;
  margin-bottom: 0.32rem;
}
.bigImgBox {
  border-radius: 50%;
  overflow: hidden;
  width: 1.44rem;
  height: 1.44rem;
  margin: 0 auto;
  img {
    width: 1.44rem;
    height: 1.44rem;
  }
}
.groupName {
  text-align: center;
  margin: 0.24rem 0;
  font-size: 20px;
  font-weight: 600;
}
.groupTitle {
  text-align: center;
  font-size: 14px;
  color: #a3a4a6;
  margin-bottom: 0.89rem;
}
.groupIcon {
  display: flex;
  flex-wrap: wrap;
  li {
    margin: 0.3rem 0;
    text-align: center;
    width: 25%;
    p {
      font-size: 13px;
      color: #7d8082;
    }
  }
}

.memberTitle {
  // width: 100%;
  height: 0.8rem;
  .memberLeft {
    float: left;
    line-height: 0.8rem;
    margin-left: 0.29rem;
  }
  .memberRight {
    float: right;
    line-height: 0.8rem;
    margin-right: 0.29rem;
  }
}
.memberImg {
  // width: 100%;
  height: 1.2rem;
  margin-left: 0.31rem;
  li {
    float: left;
    border-radius: 50%;
    overflow: hidden;
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.1rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>